<template>
  <div class="paid-order-view">
    <h1>已支付订单</h1>
    <div class="search-bar">
      <input v-model="searchQuery" type="text" placeholder="搜索订单号" />
      <button @click="clearSearch">清除</button>
    </div>
    <table class="order-table">
      <thead>
      <tr>
        <th>订单号</th>
        <th>总价</th>
        <th>下单时间</th>
        <th>支付时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="order in filteredOrders" :key="order.id">
        <td>{{ order.orderNumber }}</td>
        <td>{{ order.totalPrice }} 元</td>
        <td>{{ formatDate(order.orderDate) }}</td>
        <td>{{ formatDate(order.paymentDate) }}</td>
        <td>
          <button @click="viewOrderDetails(order.id)">查看详情</button>
          <button @click="reviewOrder(order.id)">评价</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const orders = ref([
  { id: 1, orderNumber: '1234567890', totalPrice: 150, orderDate: '2023-10-01T10:00:00Z', paymentDate: '2023-10-01T10:15:00Z' },
  { id: 2, orderNumber: '2345678901', totalPrice: 200, orderDate: '2023-10-02T11:00:00Z', paymentDate: '2023-10-02T11:15:00Z' },
  { id: 3, orderNumber: '5455554556', totalPrice: 250, orderDate: '2023-10-03T12:00:00Z', paymentDate: '2023-10-03T12:15:00Z' },
  { id: 4, orderNumber: '3453469866', totalPrice: 250, orderDate: '2023-10-03T16:00:00Z', paymentDate: '2023-10-03T12:15:00Z' },
  { id: 5, orderNumber: '3359755677', totalPrice: 250, orderDate: '2023-10-03T05:00:00Z', paymentDate: '2023-10-03T12:15:00Z' },
  // 更多订单...
]);

const searchQuery = ref('');

const filteredOrders = computed(() => {
  return orders.value.filter(order =>
      order.orderNumber.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
};

const viewOrderDetails = (orderId) => {
  // 模拟查看订单详情逻辑
  alert(`查看订单详情 ${orderId}`);
  // 这里可以跳转到订单详情页面
};

const reviewOrder = (orderId) => {
  // 模拟评价订单逻辑
  alert(`评价订单 ${orderId}`);
  // 这里可以跳转到评价页面
};

const clearSearch = () => {
  searchQuery.value = '';
};
</script>

<style scoped>
.paid-order-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
}

.search-bar {
  margin-bottom: 20px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-bar input {
  width: 300px;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.search-bar button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.search-bar button:hover {
  background-color: #0056b3;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 16px;
}

.order-table th, .order-table td {
  border: 1px solid #ddd;
  padding: 15px;
  text-align: left;
}

.order-table th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333;
}

.order-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.order-table tr:hover {
  background-color: #e0e0e0;
}

.order-table button {
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.order-table button:hover {
  background-color: #0056b3;
}
</style>